<template>
    <el-container>
    <div style="position: absolute;width: 500px; height: 30px; padding: 0px; margin: 0px;top:20px;right: 0px;background: #969696;">
        <el-button type="primary" icon="el-icon-pie-chart" v-for="(item, index) in items" :key="index" @click="clickButton(item.id)"
            style="margin: 8px;margin-left: 10px;">{{item.message}}</el-button>
    </div>
    <div style="position: absolute;width: 500px; height: 500px; padding: 0px; margin: 0px; border-width: 0px; overflow: hidden;top:50px;right: 0px;  cursor: default;"
         id="myChart"></div>
    </el-container>
</template>

<script>
    const echarts = require('echarts');
    export default {
        name: "chart",
        data() {
            return {
                childIfChartShow: false,
                items: [
                    { message: '图一', id: 111 },
                    { message: '图二',id: 112 }
                ]
            }
        },
        props:{
            menuSelectNum: {
                type: Number,
                default: function () {
                    return 1
                }
            }},
        mounted() {
            this.drawLine();
        },
        methods: {
            clickButton(val) {
                //根据不同的按钮展示不同的图形
                let myChart = echarts.init(document.getElementById('myChart'));
                if(val==111)
                {
                    myChart.setOption({
                        backgroundColor:'#fffbff',
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            top:30,
                            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                        },
                        series: [
                            {
                                name:'访问来源',
                                type:'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:[
                                    {value:335, name:'直接访问'},
                                    {value:310, name:'邮件营销'},
                                    {value:234, name:'联盟广告'},
                                    {value:135, name:'视频广告'},
                                    {value:1548, name:'搜索引擎'}
                                ]
                            }
                        ]
                    },true);
                }
                if(val==112)
                {
                    //前端框架简单的写了请求本地的json，实际应是请求后端返回的json
                    this.$http.get('static/chart2.json').then(res => {
                        myChart.setOption(res.body,true);
                    })
                }
                if(val==121)
                {
                    myChart.setOption(
                        {
                            backgroundColor: '#2c343c',

                            title: {
                                text: 'Customized Pie',
                                left: 'center',
                                top: 30,
                                textStyle: {
                                    color: '#ccc'
                                }
                            },

                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },

                            visualMap: {
                                show: false,
                                min: 80,
                                max: 600,
                                inRange: {
                                    colorLightness: [0, 1]
                                }
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: [
                                        {value: 335, name: '直接访问'},
                                        {value: 310, name: '邮件营销'},
                                        {value: 274, name: '联盟广告'},
                                        {value: 235, name: '视频广告'},
                                        {value: 400, name: '搜索引擎'}
                                    ].sort(function (a, b) {
                                        return a.value - b.value;
                                    }),
                                    roseType: 'radius',
                                    label: {
                                        normal: {
                                            textStyle: {
                                                color: 'rgba(255, 255, 255, 0.3)'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            lineStyle: {
                                                color: 'rgba(255, 255, 255, 0.3)'
                                            },
                                            smooth: 0.2,
                                            length: 10,
                                            length2: 20
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#c23531',
                                            shadowBlur: 200,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    },

                                    animationType: 'scale',
                                    animationEasing: 'elasticOut',
                                    animationDelay: function (idx) {
                                        return Math.random() * 200;
                                    }
                                }
                            ]
                        },true
                    );
                }
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                this.clickButton(this.items[0].id);
            }
        },
        watch: {
            menuSelectNum(val) {
                //根据选择的专题分析不同渲染不同数量的button
                if(val==11)
                {
                   this.items=[
                        { message: '图一', id: 111 },
                        { message: '图二',id: 112 }
                    ]
                }
                if(val==12)
                {
                   this.items=[
                        { message: '图三', id: 121},
                        { message: '图四',id: 122},
                        {message:'图五',id: 123}
                    ]
                }
                if(val==21)
                {
                    this.items=[
                        { message: '图六', id: 211}
                    ]
                }


                //改变成对应的图表
                this.clickButton(this.items[0].id);
            }
        }
    }
</script>

<style scoped>

</style>